<template>
  <view class="Search">
    <view class="search_header">
      <view class="search_input">
        <view class="iconfont icon-RectangleCopy loupe"></view>
        <input  v-model="Inputvalue" type="text" placeholder="输入商品名" name="" id="">
      </view>
       <view class="search_button" @tap='btn'>搜索</view>
    </view>
    <view class="search_list">
        <ProductList v-for="product in productsList" :key="product.goods_id" :goods_id="product.goods_id" :goods_name="product.goods_name"/>
    </view>
  </view>
</template>

<script>
import http from '@/utils/http.js';
import ProductList from '@/components/ProductList';
export default {
   components:{
    ProductList
  },
  data(){
    return{
      Inputvalue:'',
      productsList:[]
    }
  },
  methods:{
    async btn(){
      this.productsList=await http.get('/goods/qsearch', {query:this.Inputvalue })
      console.log('点击搜索');
      
    }
  }
}
</script>

<style lang="less" scoped>
.Search{
  .search_header{
    display: flex;
    justify-content: space-between;
    height: 61rpx;
    padding: 15rpx 18rpx;
    .search_input{
      display: flex;
      align-items: center;
      flex: 1;
      position: relative;
      background-color: #e6e6e6;
      border-radius: 27rpx;
      font-size: 26rpx;
      padding-left: 57rpx;
       .loupe{
        position: absolute;
        left: 15rpx;
        top: 12rpx;
        font-size: 40rpx;
      }
    }
    .search_button{
      display: flex;
      justify-content: center;
      align-items: center;
      width: 101rpx;
      font-size: 26rpx;
      color: #fff;
      border-radius: 8rpx;
      background-color: #e8424f;
      margin-left: 15rpx;
    }
  }
}
</style>